/* Général */

.va-baseline { vertical-align: baseline; }

.va-sub { vertical-align: sub; }

.va-super { vertical-align: super; }

.va-top { vertical-align: text-top; }

.va-bottom { vertical-align: text-bottom; }

.va-middle { vertical-align: middle; }

.va-top { vertical-align: top; }

.va-bottom { vertical-align: bottom; }

.ml-5 { margin-left: 5px; }

.ml-10 { margin-left: 10px; }

.ml-15 { margin-left: 15px; }

.mr-5 { margin-right: 5px; }

.mr-10 { margin-right: 10px; }

.mr-15 { margin-right: 15px; }

table td.empty { height: 30px; }

.deleted { text-decoration: line-through; }

.rules { list-style: none; padding-left: 10px; }

    .rules .rule { font-size: 16px; margin-bottom: 20px; }

        .rules .rule.valid { color: forestgreen; }

        .rules .rule.error { color: #a94442; }

        .rules .rule .fa { margin-right: 10px; }

.btn:hover, .btn:focus, .btn.focus { color: white; }

.col-button { margin-top: 25px; }

input[type=radio].form-control { margin: 0; box-shadow: none; width: 20px; display: inline-block; }

.modal-title { display: inline-block; }

.tags { padding: 5px 0px; margin-bottom: 10px; }

    .tags .tag { padding: 5px 7px; background-color: #e2e2e2; display: inline-block; margin-right: 5px; margin-bottom: 5px; border-radius: 5px; }

        .tags .tag span { font-weight: bold; margin-right: 10px; }

        .tags .tag i { font-size: 10px; cursor: pointer; float: right; }

.ui-autocomplete { top: auto; left: auto; }

.ui-menu-item-wrapper.ui-state-active { background: #e05656; border-color: #B9121B; }


.collapse-cat { font-size: 24px; margin-top: 7px; cursor: pointer; user-select: none; }

.chk-list { display: none; list-style: none; }

    .chk-list.expand { display: block; }

.content label { margin-top: 10px; }

.chk-list { padding-left: 0px; }

    .chk-list li { list-style: none; }

        .chk-list li input[type=checkbox] { width: 20px; height: 20px; margin-right: 10px; }

        .chk-list li span { vertical-align: super; }

.dataTables_filter { display: none; }

.k-filtercell > span { padding: 0px; }

.k-filter-row th, .k-grid-header th.k-header { padding: 5px; }

.fa-circle.green { color: green; }

.fa-circle.red { color: red; }

.input-titre { margin-bottom: 20px; font-size: 30px; padding: 5px 10px; border: none; width: 100%; max-width: 100%; box-shadow: none; height: auto; }

.title { border-bottom: 1px solid #e2e2e2; margin-bottom: 20px; }

    .title h1 { margin: 15px 0px; }

label.value { display: block; text-align: center; font-size: 24px; margin-top: 10px; font-weight: normal; }

.filtres label { display: block; }

.filtres ul { padding-left: 0px; }

    .filtres ul li { list-style: none; }

        .filtres ul li input[type=checkbox] { width: 16px; height: 16px; margin-right: 10px; }

        .filtres ul li span { vertical-align: super; font-size: 12px; }

.url-retour { margin: 10px 0px; }

    .url-retour .fa { margin-right: 10px; }

.input-validation-error { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }

.kv-file-remove { display: none; }

.save-container { position: fixed; top: 0px; right: 0px; margin-right: 15px; margin-top: 15px; }

    .save-container i { margin-right: 10px; }

    .save-container .save { display: none; }

        .save-container .save.success { color: forestgreen; }

        .save-container .save.in-progress { }

        .save-container .save.error { color: red; }


.bullet.green { color: forestgreen; }

.bullet.red { color: red; }

body { font-family: 'Roboto', sans-serif; color: #3c3b4e; }

.body-content { padding-left: 15px; padding-right: 15px; }

input, select, textarea { max-width: 280px; }

.btn { transition: 0.2s; }

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

    .btn .glyphicon, .btn .fa { margin: 0px 5px; }

    .btn.btn-retour { color: #777; padding: 0; }

        .btn.btn-retour:hover { text-decoration: underline; }

.carousel-caption p { font-size: 20px; line-height: 1.4; }

.carousel-inner .item img[src$=".svg"] { width: 100%; }

footer { text-align: center; }

.btn.btn-client { background-color: #e05656; color: white; }

    .btn.btn-client:hover, .btn.btn-client:active, .btn.btn-client:focus { background-color: #d82b2b; }

.btn.btn-primary { background-color: #348686; border-color: #348686; }

    .btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus { background-color: #0D5E5E; }

.btn-download-file, .btn.btn-download { background-color: #ddb11c; color: white; }

    .btn.btn-download:hover, .btn.btn-download:active, .btn.btn-download:focus { background-color: #F7EA58; color: white; }

.btn-valid { background-color: #45B345; color: white; }

    .btn-valid:hover, .btn.btn-valid:active, .btn.btn-valid:focus { background-color: #127E12; }

.btn-info { background-color: #8AC7C7; color: #0D5E5E; }

    .btn-info:hover, .btn.btn-info:active, .btn.btn-info:focus { background-color: #539E9E; }

.btn-delete { background-color: #E05656; color: white; }

    .btn-delete:hover, .btn.btn-delete:active, .btn.btn-delete:focus { background-color: #d82b2b; color: white; }

.notifications { margin: 15px 0px; }

    .notifications .notification { border-bottom: 1px solid #e2e2e2; padding: 10px 5px; }

.notification-button-container .btn { width: 100%; margin-bottom: 10px; }

.fRight { float: right; }

.aRight { text-align: right; }

.aCenter { text-align: center; }

.purcent { font-weight: bold; display: none; margin-left: 10px; }

    .purcent.displayed { display: inline-block; }

    .purcent.green { color: #379F11; }

    .purcent.yellow { color: #FB9B03; }

    .purcent.red { color: #D03C3B; }

footer { background-color: #3D3C4E; color: white; text-align: left; padding: 15px 20px; font-size: 12px; }

    footer p { margin: 0px; }

    footer a { color: white; font-weight: bold; }

.header-content { height: 60px; background: url('../images/main-logo.png') left no-repeat; background-size: 10%; border-bottom: 1px solid #D6D6D6; padding-left: 130px; }

    .header-content .user-container { float: right; }

        .header-content .user-container .user { display: inline-block; padding-top: 18px; }

            .header-content .user-container .user .user-image { width: 30px; height: 30px; border: 1px solid #555; border-radius: 50%; padding: 2px; margin-top: -2px; display: inline-block; }

            .header-content .user-container .user .user-name { color: #7d7c94; font-size: 15px; line-height: 17px; font-family: 'Roboto', sans-serif; font-weight: 400; vertical-align: super; }

                .header-content .user-container .user .user-name.no-photo { margin-top: 7px; display: inline-block; }

                .header-content .user-container .user .user-name:hover { color: #3c3b4e; }

            .header-content .user-container .user a { text-decoration: none; color: #7d7c94; }

            .header-content .user-container .user .dropdown .fa { vertical-align: super; margin-left: 5px; }


    .header-content .langage-barre { text-align: right; height: 25px; float: right; margin: 22px 0px 0px 25px; }

    /* A enlever quand on aura la langue anglaise */
    /*.header-content .langage-barre { display: none; }*/
    /* A enlever quand on aura la langue anglaise */


    .header-content .select-language-container { display: none; }

h1 { font-size: 30px; font-weight: 300; letter-spacing: 1px; color: #3c3b4e; text-transform: uppercase; font-family: 'Roboto', sans-serif; margin: 25px 0px; }

    h1 .fa { margin-right: 10px; }

h2 { font-weight: 500; font-size: 22px; color: #3c3b4e; font-family: 'Roboto', sans-serif; }

h3 { font-size: 18px; line-height: 24px; letter-spacing: 1px; color: #3c3b4e; font-family: 'Roboto', sans-serif; font-weight: 500; }

h4 { font-size: 16px; line-height: 20px; letter-spacing: 1px; color: #3c3b4e; font-family: 'Roboto', sans-serif; font-weight: 500; }

.alert .close { display: none; }

.alert.alert-success .close,
.alert.alert-danger .close,
.alert.alert-info .close { display: inline-block; }


.alert.alert-success,
.alert.alert-danger,
.alert.alert-info { display: block; }

.texte-presentation { padding: 15px; border: 1px solid #ccc; background-color: #fefefe; margin-bottom: 20px; border-radius: 5px; }

    .texte-presentation h2 { font-weight: bold; margin: 0; }

    .texte-presentation p { margin: 10px 0px; }

    .texte-presentation ul { margin-top: 20px; }

.k-grid td { padding: 5px 10px; font-size: 12px; }

#modalCreate .edit.glyphicon.glyphicon-pencil.btn-link, #FirstDiv .edit.glyphicon.glyphicon-pencil.btn-link,
#modalCreate .close.glyphicon.glyphicon-remove-circle.btn-link, #FirstDiv .close.glyphicon.glyphicon-remove-circle.btn-link { display: none; }

.bold { font-weight: bold; }

.block { display: block; }

.icone-type-appareil { font-size: 20px; width: 30px; text-align: right; margin-right: 15px; }

.modal-xl { width: 1170px; }

.ul-type-appareils { margin-top: 20px; }

.field-validation-error { color: red; margin-top: 5px; }

.used { background-color: #FFB6B8; }

/* Fin Général */
/* Customer Layout */
.notification-button { vertical-align: bottom; margin-right: 15px; background-color: transparent; border: 1px solid #ccc; }

.notification-tooltip { position: absolute; display: none; width: 400px; border: 1px solid #333; margin-top: 30px; margin-left: -300px; background-color: white; z-index: 2; border-radius: 5px; }

    .notification-tooltip .notification-tooltip-triangle { width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 25px solid black; position: absolute; margin: -25px 0px 0px 295px; }

        .notification-tooltip .notification-tooltip-triangle:after { content: ''; position: absolute; top: 1px; left: -25px; width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 25px solid white; }

    .notification-tooltip .notification-tooltip-content { padding: 10px; }

        .notification-tooltip .notification-tooltip-content .notifications { max-height: 300px; overflow-y: scroll; padding: 5px; }

        .notification-tooltip .notification-tooltip-content .notification { text-align: left; padding: 10px; }

@keyframes slidein {
    0% { display: none; }

    100% { display: block; }
}

/* Fin Customer Layout */

/* Date Picker */

.ui-widget-content { background: white; color: #333; z-index: 2 !important; }

.ui-widget-header, .ui-datepicker-title { background: #e05656; border-color: red; }

    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: #e05656; border-color: #B9121B; }

    .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { color: white; background: #B9121B; border-color: #B9121B; }

/* FIn Date Picker */

/* Menu */

.container-fluid { padding: 0px; }

#ulMenu { padding: 0px; margin-bottom: 0px; padding-top: 10px; }

.navbar { border-radius: 0px; border: none; text-align: center; background-color: transparent; display: inline-block; }

.navbar-nav > li { margin: 0px 2.5px; }

    .navbar-nav > li > a { color: #3c3b4e; text-transform: uppercase; font-size: 14px; line-height: 17px; font-family: 'Roboto', sans-serif; font-weight: 400; }

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #e05656; text-transform: uppercase; font-size: 14px; line-height: 17px; font-family: 'Roboto', sans-serif; font-weight: 400; background-color: transparent; }

.navbar-nav > li.active { font-weight: bold; color: #e05656; }

.menu.nav { float: left; text-align: left; }

.navbar-brand { padding-top: 27.5px; }

.select-client { margin: 0px 10px; float: right; }

.select-site { float: right; }


/* Fin Menu */

/* Loader */

.overlay { background-color: rgba(255,255,255, 0.7); width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

    .overlay span { display: block; font-weight: bold; text-align: center; margin-top: 20px; }

    .overlay img { width: 24px; margin: auto; display: block; margin-top: 10px; }

/* Fin Loader */

/* Login */

.account-login { }

    .account-login .alert { margin-top: 20px; }

.account-login-container { margin: 60px 0px; }

.account-login .text-danger { margin-top: 5px; display: block; }

/* Fin Login */

/* Home Maintenance */

.maintenance-index p { margin: 0; }

.maintenance-recherche { display: block; border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-bottom: 10px; }

.maintenance-historique-container { border: 1px solid #ccc; border-radius: 5px; padding: 10px; min-height: 400px; }

.maintenance-liste-piece-container { border: 1px solid #ccc; border-radius: 5px; padding: 10px; min-height: 400px; }

.maintenance-boutons { min-height: 400px; }

.maintenance-recherche-container { border: 1px solid #ccc; border-radius: 5px; padding: 10px; min-height: 400px; }

    .maintenance-recherche-container .form-control { width: 100%; max-width: none; height: 50px; }

    .maintenance-recherche-container #btn-recherche { position: absolute; right: 26px; top: 11px; height: 50px; }

.saisie-piece { display: block; border-bottom: 1px solid #ccc; padding-bottom: 10px; margin-bottom: 10px; }

    .saisie-piece .form-control { width: 100%; max-width: none; height: 50px; }

    .saisie-piece #btn-piece { position: absolute; right: 26px; top: 11px; height: 50px; }

.btn.big { padding: 15px; font-size: 16px; display: block; width: 100%; margin-bottom: 10px; }

    .btn.big i { display: block; margin-bottom: 10px; font-size: 24px; }

.maintenance-liste-piece-title { border-bottom: 1px solid #ccc; margin-bottom: 10px; }

    .maintenance-liste-piece-title p { font-size: 16px; font-weight: bold; display: block; }

.maintenance-liste-piece-contenu i { display: block; text-align: center; }

.maintenance-liste-piece-count { text-align: right; margin-bottom: 10px; font-weight: bold; }

.maintenance-liste-piece { border-top: 1px solid #ccc; margin: 10px 0px; padding-top: 10px; }

    .maintenance-liste-piece i { display: inline-block; }

    .maintenance-liste-piece svg { display: block; width: 100%; }

    .maintenance-liste-piece button { vertical-align: top; }

    .maintenance-liste-piece h3 { margin: 0; }

.maintenance-liste-piece-appareil-encours p { font-weight: bold; }

.maintenance-historique-precedente .maintenance-historique-piece, .maintenance-historique .maintenance-historique-piece { border-bottom: 1px solid #ccc; padding: 10px 0px; }

    .maintenance-historique-precedente .maintenance-historique-piece:last-of-type, .maintenance-historique .maintenance-historique-piece:last-of-type { border: none; }

#modal-statut #status-encours { display: block; margin: 10px 0px; }

#status-granted div { margin-top: 20px; display: block; }

#modal-statut button { margin: 0px 10px; }

.no-price, .max-quantite { text-align: center; margin-top: 10px; font-weight: bold; display: block; }

.maintenance-index .alert-index { min-height: 72px; }

.maintenance-index #chCodeBarre { display: inline-block; height: 20px; width: 20px; margin-right: 5px; margin-top: 10px; }

.maintenance-index .txtCodeBarre { vertical-align: super; display: inline-block; font-weight: bold; }

.maintenance-historique-precedente-container { border: 1px solid #ccc; border-radius: 5px; padding: 10px; min-height: 200px; margin-top: 20px; }

.maintenance-index .btn-garantie { margin-left: 10px; width: 45px; height: 32px; }

    .maintenance-index .btn-garantie.selected { background-color: #8FCF3C; }

.maintenance-historique-container.outOfPrice { border-color: #B1221C; background-color: #FFB6B8; }


/* Fin Home Maintenance */
.home-facturation .dropdown-menu { min-width: 500px; padding: 10px; margin-left: -200px; }

    .home-facturation .dropdown-menu .title { font-weight: bold; }

    .home-facturation .dropdown-menu input[type=checkbox] { vertical-align: sub; margin-right: 10px; }

.home-facturation .btn.btn-primary { padding: 6px 12px; }

.home-facturation .periodes { display: inline-block; }

    .home-facturation .periodes .periode { display: inline-block; }

.home-facturation-contenu { overflow-x: scroll; border: 1px solid #e2e2e2; padding: 10px; display: none; }

    .home-facturation-contenu.selected { display: block; }

.facturation-table { text-align: center; }

    .facturation-table thead .fa.fa-times { position: absolute; margin-left: 10px; margin-top: 4px; visibility: hidden; }

        .facturation-table thead .fa.fa-times.hover { visibility: visible; }


    .facturation-table thead th { text-align: center; border-right: 1px solid #ddd; min-width: 100px; }

    .facturation-table tbody { border-bottom: 2px solid #ddd; }

        .facturation-table tbody td { border-right: 1px solid #ddd; }

            .facturation-table tbody td:first-child { max-width: 235px; }

        .facturation-table tbody .line:nth-child(odd) { background-color: #f5f5f5; }

        .facturation-table tbody .line .fa { margin-right: 10px; cursor: pointer; }

            .facturation-table tbody .line .fa.fa-times { visibility: hidden; }

        .facturation-table tbody .line:hover .fa.fa-times { visibility: visible; }

        .facturation-table tbody .line td:first-of-type { font-weight: bold; text-align: left; min-width: 300px; }

        .facturation-table tbody .sub-line:nth-child(odd) { background-color: #fcfcfc; }

        .facturation-table tbody .sub-line td:first-of-type { text-align: left; padding-left: 70px; }

    .facturation-table td:last-child, .facturation-table .line:last-of-type, .facturation-table th:last-child { background-color: #417324 !important; color: white; }


.home-facturation-button { float: right; }

    .home-facturation-button:focus,
    .home-facturation-button:active { outline: none; }

    .home-facturation-button.switchedOn:focus,
    .home-facturation-button.switchedOn:active,
    .home-facturation-button.switchedOn { background-color: #379f11; color: white; }

.tools.filters { padding: 15px 0px; margin: 20px 0px; border: 1px solid #eeeeee; border-left: none; border-right: none; text-align: right; }

    .tools.filters .form-control { display: inline-block; }

    .tools.filters label { margin: 0px 15px; }

    .tools.filters .datepicker { width: 150px; }

    .tools.filters .btn { margin-left: 15px; margin-top: -5px; }

        .tools.filters .btn .fa { margin-right: 15px; }

        .tools.filters .btn.btn-primary .fa { margin-right: 0px; }

        .tools.filters .btn .fa.fa-caret-down { margin-right: 0px; margin-left: 10px; }

    .tools.filters .dropdown { display: inline-block; }


.home-facturation-tabs { }

    .home-facturation-tabs .home-facturation-tab { color: inherit; border: 1px solid #e2e2e2; border-bottom: none; padding: 10px 15px; display: inline-block; }

        .home-facturation-tabs .home-facturation-tab:hover, .home-facturation-tabs .home-facturation-tab.selected { background-color: #e2e2e2; }

        .home-facturation-tabs .home-facturation-tab p { margin: 0; }

        .home-facturation-tabs .home-facturation-tab:not(:first-child) { border-left: none; margin-left: -5px; }

#liste-pieces .facturation-table td:nth-child(3) { text-align: left; }

#extraction #lbl-total-resultats { margin-right: 20px; font-style: italic; }

/* Intervention Index */

.intervention-grid { margin-top: 20px; display: block; }

    .intervention-grid .k-widget.k-dropdown.k-header.k-dropdown-operator { display: block; font-size: 12px; }

    .intervention-grid .k-filter-row .k-dropdown-operator, .intervention-grid .k-filtercell > span > .k-button { position: relative; width: 100%; right: 0px; margin: 10px 0px; }

    .intervention-grid .k-button.k-button-icon { margin: 0px !important; }

        .intervention-grid .k-button.k-button-icon:after { content: 'Annuler'; margin-left: 5px; color: #32364c; }

.intervention-index .export-content { display: inline-block; }

    .intervention-index .export-content img { display: none; width: 30px; margin-right: 10px; }

        .intervention-index .export-content img.en-cours { display: inline-block; }

.intervention-index { }

    .intervention-index .form-control.inline { width: 65%; display: inline-block; }

    .intervention-index select.form-control.inline { width: 33%; }

    .intervention-index .filtres .col-md-12 { margin-bottom: 10px; }

    .intervention-index .filtres .btnFilter { margin-top: 15px; }

/* Intervention Index */
/* Intervention Detail */
.intervention-detail { }

    .intervention-detail .alert { margin: 0; }

    .intervention-detail .item { border: 1px solid #e2e2e2; min-height: 100px; margin: 10px 0px; padding: 10px; }

        .intervention-detail .item .title { margin: 0px; border: none; }

        .intervention-detail .item .entete { margin-bottom: 10px; }

        .intervention-detail .item .historique-intervention { padding: 5px 10px; border: 1px solid #e2e2e2; border-bottom: none; }

            .intervention-detail .item .historique-intervention:last-child { border-bottom: 1px solid #e2e2e2; }

            .intervention-detail .item .historique-intervention p { display: inline-block; margin: 0px; }

            .intervention-detail .item .historique-intervention i { display: inline-block; }

.informations-attachment { padding: 5px 10px; border-bottom: 1px solid #e2e2e2; }

    .informations-attachment p { display: inline-block; margin: 0px; margin-top: 10px; }

    .informations-attachment i { font-size: 12px; display: inline-block; }

.intervention-detail .item .form-group.empty { padding-top: 25px; }

.intervention-detail .item .informations-formulaire { }

    .intervention-detail .item .informations-formulaire #btn-envoi-mail { position: absolute; top: 25px; right: 15px; }

        .intervention-detail .item .informations-formulaire #btn-envoi-mail.renvoi { }


        .intervention-detail .item .informations-formulaire #btn-envoi-mail.disabled { opacity: 0.5; }

    .intervention-detail .item .informations-formulaire #txtEmail { padding-right: 65px; }

    .intervention-detail .item .informations-formulaire .form-control { width: 100%; max-width: 100%; }

    .intervention-detail .item .informations-formulaire textarea { height: 150px; }

    .intervention-detail .item .informations-formulaire #chContratId { }

    .intervention-detail .item .informations-formulaire .cb-line { margin-top: 10px; margin-left: auto; margin-right: auto !important; }



.historique-interventions-container { margin-top: 20px; }

.table-expeditions { }

    .table-expeditions th:nth-child(2),
    .table-expeditions th:nth-child(3),
    .table-expeditions th:nth-child(4),
    .table-expeditions td:nth-child(2),
    .table-expeditions td:nth-child(3),
    .table-expeditions td:nth-child(4) { text-align: center; }

.intervention-informations, .intervention-appareils { overflow-y: visible; }

.intervention-appareils { height: 492px; }

    .intervention-appareils .tools { padding: 10px 0px; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; margin: 10px 0px; height: 56px; }

        .intervention-appareils .tools * { display: none; }

        .intervention-appareils .tools.opened * { display: inline-block; }

        .intervention-appareils .tools .form-control { margin-right: 10px; }

        .intervention-appareils .tools input[type=checkbox] { margin-right: 10px; margin-left: 10px; display: inline-block; margin-top: 10px; }

    .intervention-appareils .co { overflow-y: auto; height: 400px; }


.taCommentaire { width: 100%; margin-top: 10px; }

.input-libelle { width: 100%; border: none; max-width: none; }

.informations-attachment .input-libelle { margin-top: 6px; }

.informations-attachment i { margin: 0px 10px; font-size: 13px; }



/* Fin Intervention Detail */
.fil-ariane { padding: 15px 0px; border-bottom: 1px solid #e2e2e2; margin-bottom: 15px; }

    .fil-ariane .arrow { font-weight: bold; margin: 0px 10px; color: #3c3b4e; }

    .fil-ariane a { font-weight: bold; }

    .fil-ariane .form-control { display: inline-block; }

    .fil-ariane #filArianeAppareil, .fil-ariane #filArianeTxtAppareil { width: 200px; }

    .fil-ariane #btn-recherche { vertical-align: top; }

    .fil-ariane .fa-exclamation-circle { color: red; position: absolute; margin-top: 7px; font-size: 20px; margin-left: -30px; }

.appareil-index { }

    .appareil-index h3 { margin: 0px; padding-bottom: 10px; margin-bottom: 10px; }


    .appareil-index .table-liste-appareils td:nth-child(4) { text-align: center; }

    .appareil-index .table-liste-appareils td:nth-child(5) { text-align: center; }

    .appareil-index #appareils-table { margin-top: 20px; }

    .appareil-index .export-content { display: inline-block; }

        .appareil-index .export-content img { display: none; width: 30px; margin-right: 10px; }

            .appareil-index .export-content img.en-cours { display: inline-block; }

    .appareil-index .liste-appareils-container { margin-top: 20px; }

    .appareil-index #appareils-table_filter { display: none; }




.dataTables_length { width: 100%; }

    .dataTables_length label { display: block; width: 100%; }

        .dataTables_length label span { }

    .dataTables_length select { margin: 0px 15px; display: inline-block; width: 150px; }

    .dataTables_length .btn.btn-download { float: right; }

.appareil-detail { }

    .appareil-detail h3 { margin-top: 0px; }

    .appareil-detail #editAppareilForm .tools { margin-bottom: 15px; }

    .appareil-detail #editAppareilForm .row { margin-bottom: 10px; }

    .appareil-detail .form-control { max-width: none; }

    .appareil-detail #taCommentaire { height: 250px; }

    .appareil-detail .table-historique-appareils { height: 275px; overflow-y: auto; }

    .appareil-detail #btn-add-attachment { margin-top: 10px; margin-right: 10px; }

    .appareil-detail .detail-bloc { border: 1px solid #e2e2e2; padding: 10px 15px; margin: 5px 0px; border-radius: 5px; }

        .appareil-detail .detail-bloc.last { margin-bottom: 20px; }

    .appareil-detail #documents h3 { margin-top: 15px; padding-bottom: 10px; }

    .appareil-detail .bandeau-contamination { color: #a94442; background-color: #f2dede; border: 1px solid #ebccd1; font-size: 24px; text-transform: uppercase; text-align: center; padding: 10px 15px; margin: 5px 0; border-radius: 5px; }

.informations-attachment .fa-info-circle { margin-left: 0px; font-size: 18px; cursor: help; vertical-align: middle; }

.informations-attachment .input-libelle { width: calc(100% - 40px); }


.intervention-appareil { }

    .intervention-appareil .intervention-appareil-contenu .liste-appareils { border-right: 1px solid #e2e2e2; min-height: 500px; vertical-align: top; font-size: 11px; padding-left: 0px; padding-right: 0px; }

    .intervention-appareil .intervention-appareil-contenu .appareils-ajoutes { vertical-align: top; }

    .intervention-appareil .intervention-appareil-contenu .filtres { border-right: 1px solid #e2e2e2; vertical-align: top; }

    .intervention-appareil .intervention-appareil-contenu .btnFilter { margin-top: 15px; }

.resultats .info { margin-top: 20px; text-align: center; }

.resultats .resultat { padding: 10px 0px; border-bottom: 1px solid #e2e2e2; font-size: 13px; }

    .resultats .resultat.other-client { background-color: skyblue; }

    .resultats .resultat .statut { font-weight: bold; text-align: center; }

.change-appareil-statut .change-statut { border-left: 1px solid #e2e2e2; }

.change-appareil-statut input, .change-appareil-statut textarea, .change-appareil-statut select { max-width: none; }

.change-appareil-statut textarea { height: 400px; margin-bottom: 20px; }

.cb-lines { border-bottom: 1px solid #e2e2e2; margin-bottom: 20px; }

.cb-line { width: 20px; height: 20px; margin-left: auto !important; margin-right: auto !important; display: block; margin-top: 10px; }

.cb-lines label { vertical-align: super; font-size: 14px; }

.change-appareil-statut #taCommentaireClient { height: 250px; }

.change-appareil-statut #taCommentaireInterne { height: 250px; }

.change-appareil-statut .img-loader { width: 20px; position: absolute; margin-top: -27px; right: 0; margin-right: 25px; display: none; }

    .change-appareil-statut .img-loader.active { display: block; }

.table-historique-appareils { }

    .table-historique-appareils .fa.fa-info-circle { font-size: 24px; }

.tooltip > .tooltip-inner { padding: 15px; font-size: 13px; min-width: 200px; max-width: 500px; }


.intervention-add #txtLibelle { margin: 20px 0px; font-size: 30px; padding: 5px 10px; width: 100%; max-width: 100%; box-shadow: none; height: auto; }

.intervention-add input, .intervention-add select, .intervention-add textarea { width: 100%; max-width: none; margin-bottom: 20px; }

.intervention-add textarea { min-height: 250px; }

.intervention-add .taCommentaire { width: 100%; display: block; margin: 0; }

.intervention-add .btn-valid,
.intervention-add .btn-download.renvoi { position: absolute; top: 25px; right: 15px; }

.intervention-add #btn-update-statut { margin-bottom: 20px; }

.intervention-add label.value { margin-bottom: 20px; }

.intervention-add #maintenance-historique { font-size: 11px; }

    .intervention-add #maintenance-historique th { text-align: center; }

        .intervention-add #maintenance-historique th:nth-child(1) { width: 10%; }

        .intervention-add #maintenance-historique th:nth-child(2) { width: 10%; }

        .intervention-add #maintenance-historique th:nth-child(3) { width: 20%; }

        .intervention-add #maintenance-historique th:nth-child(4) { width: 35%; }

        .intervention-add #maintenance-historique th:nth-child(5) { width: 15%; }

        .intervention-add #maintenance-historique th:nth-child(6) { width: 10%; }

    .intervention-add #maintenance-historique td:nth-child(1) { text-align: center; }

    .intervention-add #maintenance-historique td:nth-child(2) { text-align: center; }

    .intervention-add #maintenance-historique td:nth-child(3) { text-align: center; }

    .intervention-add #maintenance-historique td:nth-child(4) { }

    .intervention-add #maintenance-historique td:nth-child(5) { }

        .intervention-add #maintenance-historique td:nth-child(5) .not-deleted { text-decoration: none !important; }

    .intervention-add #maintenance-historique td:nth-child(6) { text-align: center; }

.expedition-detail { }

    .expedition-detail .form-control { max-width: none; }

    .expedition-detail .titre { margin-bottom: 20px; }

    .expedition-detail input[type=checkbox] { width: 16px; height: 16px; margin-right: 10px; }

    .expedition-detail span { font-size: 16px; font-weight: bold; vertical-align: text-bottom; }

    .expedition-detail i { vertical-align: text-bottom; }

    .expedition-detail .expItnApp-element { padding: 5.5px 10.5px; }

        .expedition-detail .expItnApp-element.disabled { border: 1px solid #555; background-color: #e2e2e2; border-radius: 5px; padding: 5px 10px; }

        .expedition-detail .expItnApp-element.selected { border: 1px solid forestgreen; background-color: #afff85; border-radius: 5px; padding: 5px 10px; }

    .expedition-detail .expedition-intervention-appareil .item { border-right: 1px solid #e2e2e2; padding: 15px 10px; }

        .expedition-detail .expedition-intervention-appareil .item:nth-child(3n+0),
        .expedition-detail .expedition-intervention-appareil .item:last-child { border: none; }

.expedition-add .form-control { max-width: none; }

.expedition-add .input-titre { margin: 20px 0px; }

.table-appareils { }

    .table-appareils .text { padding-top: 15px; }

    .table-appareils .ligne-appareil-contamine { background-color: #f2dede; }

.intervention-appareil .btn-add, .intervention-appareil .btn-add-back { font-size: 12px; padding: 6px; }

.appareils .tools { margin: 20px 10px; }

.appareils .form-control { display: inline-block; margin: 0px 10px; }

.appareils .btn { vertical-align: bottom; }

.appareils .table .form-control { display: block; }

.reporting-index { }

    .reporting-index .reporting-index-content { border: 1px solid #555; margin-top: -1px; padding: 0 10px 0 10px; }

        .reporting-index .reporting-index-content .alert { margin-top: 20px; }

    .reporting-index .panels { padding: 0px 20px; /*border-right: 1px solid #e2e2e2;*/ margin: 20px 0px; }

    .reporting-index .panel { display: none; min-height: 500px; box-shadow: none; }

        .reporting-index .panel.selected { display: block; }

    .reporting-index .tabs { margin-top: 20px; }

    .reporting-index .tab { padding: 15px 20px; display: inline-block; width: auto; border: 1px solid #555; border-right: none; margin-left: -5px; cursor: pointer; background-color: white; }

        .reporting-index .tab:first-of-type { margin-left: 0px; }

        .reporting-index .tab:last-of-type { border-right: 1px solid #555; }

        .reporting-index .tab.selected, .reporting-index .tab:hover { font-weight: bold; border-bottom: none; padding-bottom: 16px; }

    .reporting-index .detail.table td { text-align: center; }

    .reporting-index #lbl-total-resultats { margin-right: 20px; font-style: italic; }

    .reporting-index h3 { margin-bottom: 20px; margin-top: 0px; }

    .reporting-index input,
    .reporting-index select,
    .reporting-index textarea { /*max-width: 500px;*/ max-width: 100%; }

    .reporting-index .export-content img { display: none; width: 30px; margin-right: 10px; }

        .reporting-index .export-content img.en-cours { display: inline-block; }


.table td.selected { background-color: #FFF799; }

.table-container { max-height: 500px; overflow-y: auto; }

.home-gestion-prix { }

    .home-gestion-prix .form-control { text-align: right; }

    .home-gestion-prix .empty-value { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }

    .home-gestion-prix .updated-value { background-color: #84D41D; color: white; border-color: lawngreen; }


.gestion-client { }

    .gestion-client #client-liste { }

        .gestion-client #client-liste tr { font-size: 12px; }

    .gestion-client .dataTable thead th,
    .gestion-client .dataTable tbody td { padding: 10px; }

    .gestion-client .gestion-client-detail { }

        .gestion-client .gestion-client-detail .select .form-control { max-width: initial; margin-bottom: 10px; }

        .gestion-client .gestion-client-detail .input { margin-top: 10px; }

        .gestion-client .gestion-client-detail .options { margin-top: 20px; }

    .gestion-client #modal-site h2 { margin-top: 0px; margin-bottom: 20px; }

    .gestion-client #editSiteForm { }

        .gestion-client #editSiteForm .input-titre { margin-top: 0px; }

        .gestion-client #editSiteForm label { margin: 10px 0px; }

        .gestion-client #editSiteForm .form-control { max-width: initial; }

    .gestion-client .gestion-client-partial .select select { height: 200px; }

    .gestion-client .border { border-right: 1px solid #e2e2e2; }

#modal-email label { font-size: 16px; margin-top: 5px; }

.files { }

    .files .entete { border-bottom: 1px solid #e2e2e2; }

        .files .entete .title { border: none; margin-bottom: 10px; margin-top: 0px; }

        .files .entete button { margin-top: -10px; }

    .files .informations-attachments { margin-top: 10px; }

        .files .informations-attachments strong { text-align: center; margin: 20px 0px; display: block; }

#client-liste_filter { display: block; }

#client-liste_wrapper .dataTables_length { width: auto; }

.gestion-client .tools { margin-bottom: 10px; }

.account-userlist { }

    .account-userlist .user-filter { margin: 15px 0px; }

    .account-userlist .user-list { }

    .account-userlist .table-user-list { }

.user-detail { }

    .user-detail .panel { padding: 0; margin: 0; box-shadow: none; }

    .user-detail input[type="checkbox"] { margin: 0px; border: none; box-shadow: none; }

    .user-detail .btn-save { margin: 15px 0px; }

    .user-detail .tabs { margin-top: 15px; }

        .user-detail .tabs .tab { border: 1px solid #e2e2e2; display: inline-block; padding: 10px 15px; border-bottom: none; cursor: pointer; }

            .user-detail .tabs .tab.selected { background-color: #e2e2e2; }

            .user-detail .tabs .tab:nth-child(2) { margin-left: -5px; }

    .user-detail .panels { border: 1px solid #e2e2e2; }

    .user-detail .panel { display: none; }

        .user-detail .panel.selected { display: block; }

.table-acces-applications, .table-acces-site { height: 500px; overflow-y: scroll; display: block; }

#acces table tr.selected { background-color: palegreen; }

.table-user-list .bullet.green { color: forestgreen; }

.table-user-list .bullet.red { color: red; }

.table-user-list th, .table-user-line td { text-align: center; }

    .table-user-line td:first-child { text-align: left; padding: 15px 7px; }

    .table-user-line td:nth-child(2),
    .table-user-line td:nth-child(3) { padding: 15px 7px; }

.table-user-list .nom { width: 35%; }

.table-user-list .client { width: 30%; }

.table-user-list .admin { width: 10%; }

.table-user-list .actions { width: 25%; }

.account-userlist .alert { margin: 0; }


#extraction.panel { border: none; }

    #extraction.panel .checkbox-content { margin-bottom: 10px; }

    #extraction.panel input[type=checkbox] { margin-right: 15px; width: 24px; }

    #extraction.panel .checkbox-span { vertical-align: text-bottom; }

    #extraction.panel .export-contents { margin-top: 10px; }

    #extraction.panel .export-content { margin-top: 10px; padding-bottom: 10px; }

    #extraction.panel .export-dates { margin-bottom: 10px; }

#warning { margin-top: -10px; display: block; text-align: center; color: red; margin-bottom: 10px; }

#link-download { font-size: 40px; margin: 20px 0px; }

.versions { }

    .versions .version { border: 1px solid #e2e2e2; padding: 10px; }

        .versions .version h2 { }

.edit-business-line { }

    .edit-business-line .contenu { display: none; }

        .edit-business-line .contenu.active { display: block; }

        .edit-business-line .contenu tr.selected td { background-color: moccasin; }

    .edit-business-line #domaine-contenu { display: block; }

    .edit-business-line #gamme-contenu { }

    .edit-business-line #ligne-produit-contenu { }

    .edit-business-line #edit-business-line-modal .value { margin-top: 0px; }

    .edit-business-line #edit-business-line-modal .trim-content { margin-top: 5px; }

        .edit-business-line #edit-business-line-modal .trim-content i { vertical-align: text-bottom; }

.intervention-facturation { }

    .intervention-facturation #chk-facture { width: 20px; height: 20px; }

.accueil { }

    .accueil .bloc { border: 1px solid #e2e2e2; padding: 10px; margin-bottom: 20px; }

        .accueil .bloc.last { margin-bottom: 0px; }

        .accueil .bloc h3 { margin-top: 10px; }

        .accueil .bloc .sub-bloc { margin-bottom: 10px; }

            .accueil .bloc .sub-bloc label { vertical-align: sub; margin-bottom: 0px; margin-top: 10px; }

            .accueil .bloc .sub-bloc .form-control-inline { display: inline-block; width: 150px; margin-right: 10px; margin-top: 2.5px; }


.abs-notifications { position: fixed; bottom: 20px; right: 20px; width: 20%; display: none; z-index: 10000; }

    .abs-notifications.active { display: block; }

    .abs-notifications .abs-notification { width: calc(100% - 20px); margin: 5px 10px; padding: 5px 10px; padding-right: 25px; border: 1px solid black; border-radius: 5px; background-color: white; }

        .abs-notifications .abs-notification .icon { display: inline-block; width: 24px; text-align: center; vertical-align: top; }

        .abs-notifications .abs-notification .message { display: inline-block; line-height: normal; width: calc(100% - 28px); }

        .abs-notifications .abs-notification .close { float: right; margin-right: -15px; margin-top: -2px; }

        .abs-notifications .abs-notification.alert-success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }

        .abs-notifications .abs-notification.alert-error { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }

        .abs-notifications .abs-notification.alert-info { color: #004085; background-color: #cce5ff; border-color: #b8daff; }

        .abs-notifications .abs-notification.alert-warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; }

.edit-appareil-libelles-modal { max-height: 600px; overflow-y: auto; }

.edit-appareil-libelles { margin-bottom: 0px; }

.edit-appareil-libelle .code { width: 30%; padding-top: 16px; }

.edit-appareil-libelle .libelle { width: 50%; }

    .edit-appareil-libelle .libelle .form-control { max-width: 100%; }

.edit-appareil-libelle .valid { width: 10%; text-align: center; }

.edit-appareil-libelle .delete { width: 10%; text-align: center; }

.mode-intervention-statut-appareil-tr .fa { font-size: 20px; }

.mode-statut-libelle { margin-top: 10px; }

#terminal { width: 40%; position: fixed; background-color: black; opacity: 0.8; right: 20px; bottom: 20px; color: white; display: none; padding: 10px; }

    #terminal .entete { border-bottom: 2px solid white; font-size: 16px; font-weight: bold; }

    #terminal .close { color: white; position: absolute; margin-top: -35px; right: 15px; opacity: 1; }

        #terminal .close:hover { color: gray; position: absolute; margin-top: -35px; right: 15px; opacity: 1; }

    #terminal #terminal-container { font-size: 11px; }

        #terminal #terminal-container .terminal-line { margin-top: 10px; margin-bottom: 10px; }

            #terminal #terminal-container .terminal-line .date { text-align: justify; }

            #terminal #terminal-container .terminal-line .statut { text-align: center; }

            #terminal #terminal-container .terminal-line .message { text-align: justify; }

                #terminal #terminal-container .terminal-line .message .green { color: green; font-weight: bold; }

                #terminal #terminal-container .terminal-line .message .red { color: darkred; font-weight: bold; }

                #terminal #terminal-container .terminal-line .message .violet { color: darkviolet; font-weight: bold; }

                #terminal #terminal-container .terminal-line .message .orange { color: orangered; font-weight: bold; }

                #terminal #terminal-container .terminal-line .message .blue { color: dodgerblue; font-weight: bold; }

    #terminal.active { display: block; }


#action-list, #chat { position: fixed; background-color: transparent; padding: 5px; border-radius: 5px }

#action-list { bottom: 105px; right: 15px; }

#chat { bottom: 15px; right: 15px; }

    #chat h3 { margin: 0px; padding-bottom: 5px; border-bottom: 1px solid #555; font-size: 14px; font-weight: bold; }

    #chat .fa-times { float: right; margin-top: -30px; font-size: 20px; }

    #chat .chat-user-list { min-height: 20px; }

    #chat .form-control { width: 100%; max-width: none; }

.list-expand { display: none; }

.list-collapse { display: block; padding: 15px 20px; border-radius: 50%; border: 1px solid #bbb; cursor: pointer; background-color: white; }

    .list-collapse:hover { background-color: #348686; transition: 0.5s; }

    .list-collapse .fa { font-size: 36px; color: #348686; }

    .list-collapse:hover .fa { color: white; transition: 0.5s; }

#chat.active { width: 350px; border: 1px solid #555; background-color: white; }

    #chat.active .list-expand { display: block; }

    #chat.active .list-collapse { display: none; }

.chat-user-list { padding: 5px; height: 400px; overflow-y: auto; }

    .chat-user-list .chat-user { border-bottom: 1px solid #555; padding: 3px 1px; font-size: 12px; }

        .chat-user-list .chat-user.no-user { text-align: center; }

        .chat-user-list .chat-user:last-of-type { border: none; }

        .chat-user-list .chat-user .fa-circle { margin-right: 5px; }

        .chat-user-list .chat-user small { font-size: 10px; }

#action-demand .panels { padding: 0px 20px; margin: 20px 0px; }

#action-demand .panel { display: none; box-shadow: none; }

    #action-demand .panel.selected { display: block; }



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

@media (max-width:768px) {
    .customer-body .titre-page h1 { font-size: 28px; }

    .navbar { margin-bottom: 0px; }

    .navbar-brand { padding-top: 15px; }

    .tools.filters .btn { margin: auto; text-align: center; display: block; }

    .home-facturation-button { float: none; display: block; margin: auto; }

    .tools.filters { text-align: left; }

        .tools.filters label { margin: 5px 0px; display: block; }

        .tools.filters input[type=text], .tools.filters select { margin-bottom: 15px; max-width: 100%; }

        .tools.filters .dropdown { display: block; margin: 5px 0px; text-align: center; }

    .user-container { float: none; margin-top: 0px; text-align: right; }

    .notification-tooltip { margin-left: 0px; width: calc(100% - 30px); margin-top: 5px; }

    .notification-tooltip-triangle { display: none; }
}

.printable { display: none; }

.intervention-detail .etiquette { font-size: 8.75px; font-weight:bold; margin-top: 10px; }
.intervention-detail .etiquette-simplifiee { font-size: 8.75px; margin-top: 15px; margin-left: 7.5px; font-weight: bold; }
.intervention-detail .etiquette:not(:last-child) { page-break-after: always; }
.intervention-detail .etiquette-simplifiee:not(:last-child) { page-break-after: always; }
.intervention-detail .etiquette .right { display: inline-block; }
    .intervention-detail .etiquette .right table { }
        .intervention-detail .etiquette .right table .id { border-bottom: 1px solid; }
        .intervention-detail .etiquette .right table td { border: none; padding: 1px 5px; text-align: left; }
            .intervention-detail .etiquette .right table td span { padding-left: 15px; }
        .intervention-detail .etiquette .right table .validite { }
.intervention-detail .etiquette .left { display: inline-block; border: none; border-right: none; padding: 0px 0px; }
    .intervention-detail .etiquette .left img { display: block !important; width: 65px; }

.intervention-detail .etiquette-simplifiee .left { display: inline-block; }
    .intervention-detail .etiquette-simplifiee .left table { }
        .intervention-detail .etiquette-simplifiee .left table td { border: 1px solid black; padding: 1px 8px; text-align: center; font-weight: bold; }
        .intervention-detail .etiquette-simplifiee .left table .validite { background-color: black !important; -webkit-print-color-adjust: exact; color: white !important; }
.intervention-detail .etiquette-simplifiee .right { display: inline-block; width: 50px; border: 1px solid black; border-left: none; padding: 0px 0px; position: absolute; margin-top: 0px; margin-left: -30px; }
    .intervention-detail .etiquette-simplifiee .right img { transform: rotate(-90deg); display: block !important; width: 50px; margin-left: 15px; margin-top: 25px; margin-bottom: 20px; }

@media print {
    .header-content .langage-barre { display: none !important; }

    .modal, .header-content, .navbar.navbar-default, #MainDiv, footer, hr, .non-printable, .fil-ariane, .alert, .title, #chat, #action-list { display: none !important; }

    .printable-content { display: block !important; }

    .printable { display: block !important; }

        .printable .barcode { display: block; margin: 0px auto; page-break-after: always; height: 80px; width: calc(100% - 30px); }

    .tools.filters { display: none; }

    .container { width: 100%; }

    .home-facturation th { padding: 2px !important; }

    .home-facturation { font-size: 7px !important; }

        .home-facturation h1 { display: none; }

    .home-facturation-contenu { overflow-x: no-display; height: auto !important; width: auto !important; }

    .facturation-table tbody .line { padding: 2.5px !important; }

        .facturation-table tbody .line td:first-of-type { min-width: 0px !important; }

        .facturation-table tbody .line td { padding: 2.5px !important; }

    /* Fiche appareil */

    .appareil-detail #txtNomAppareil { font-size: 18px; }

    .appareil-detail .url-retour { display: none; }

    .appareil-detail .maintenance { display: none; }

    .appareil-detail .maintenance-encours { display: none; }

    .appareil-detail .save { display: none; }

    .appareil-detail .form-control { border: 0; padding: 0; overflow: visible; }

    .appareil-detail .tab-content > .tab-pane { display: block !important; opacity: 1 !important; visibility: visible !important; }

    .appareil-detail #statut { width: 100%; height: 100%; overflow: hidden; }

    .appareil-detail #historique { width: 100%; height: 100%; }

    .appareil-detail .visible-print { display: block; width: auto; height: auto; overflow: visible; }

    .appareil-detail .btn-download { display: none; }

    .appareil-detail #statut-look { display: none; }

    .appareil-detail .btn-serach-historique { display: none; }

    .appareil-detail .printable * { display: block; }

    .appareil-detail .no-printable { display: none; }

    /* Fin fin appareil */
}


.appareil-detail .visible-print { }

.appareil-detail .table-statut-appareils #btn-download-statut { margin-top: 10px; margin-right: 8px; }

.appareil-detail .table-historique-appareils #btn-download-historique { margin-top: 10px; margin-right: 8px; }

.appareil-detail .table-statut-appareils { overflow-y: auto; }

#client-libelle { margin-top: 5px; }

/* Bootstrap / Kendo UI : fix content width inside hidden tabs */
.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active) { display: block; height: 0; overflow-y: hidden; }

#liste-donnees { width: 600px; padding: 10px; }

.anim { display: inline-block; margin-top: 2px; margin-left: 5px; position: absolute; }

.wrapper { width: 32px; height: 32px; position: absolute; clip: rect(0px, 32px, 32px, 16px); }

    .wrapper[data-anim~=wrapper] { -webkit-animation-duration: 0.01s; /* Complete keyframes asap */ -webkit-animation-delay: 3s; /* Wait half of the animation */ -webkit-animation-name: close-wrapper; /* Keyframes name */ }

.circle { width: 32px; height: 32px; border: 3px solid green; border-radius: 50px; position: absolute; clip: rect(0px, 16px, 32px, 0px); }

    .circle[data-anim~=left] { -webkit-animation-duration: 5s; /* Full animation time */ -webkit-animation-name: left-spin; }

    .circle[data-anim~=right] { -webkit-animation-duration: 2.5s; /* Half animation time */ -webkit-animation-name: right-spin; }

div[data-anim~=base] { -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -webkit-animation-timing-function: linear; }

#btn-mode-intervention { display: inline-block; width: calc(100% - 40px); text-align: left; }

    #btn-mode-intervention:hover,
    #btn-mode-intervention:focus,
    #btn-mode-intervention:active { color: #333; }

    #btn-mode-intervention .fa.fa-caret-down { float: right; margin-top: 3px; }

@-webkit-keyframes right-spin {
    from { -webkit-transform: rotate(0deg); }

    to { -webkit-transform: rotate(180deg); }
}

@-webkit-keyframes left-spin {
    from { -webkit-transform: rotate(0deg); }

    to { -webkit-transform: rotate(360deg); }
}

@-webkit-keyframes close-wrapper {
    to { clip: rect(auto, auto, auto, auto); }
}