:root {
    --main-bg-color : white;
    --second-bg-color : #F1FEFC;
    --back-grey : #F5F5F5;
    --back-darkgrey : #F1F1F1;
    --box-shadow-bloc : 0px 4px 3px rgba(6, 12, 73, 0.14);
    --border-radius-bloc : 8px;
    --color-principal : #0798B1;
    --color-principal-hover : rgba(7, 152, 177, 0.33);
    --color-secondaire : #060D49;
    --color-secondaire-hover : rgba(6, 13, 73, 0.26);
    --color-white : white;
    --color-darkgrey : #999 ;
    --color-darkgreyPlus : #333 ;
    --color-notif : #FFAA14;
    --color-notif-hover : rgba(255, 170, 20, 0.44);;
    --color-attente : #FB5E70;
    --color-encours : #FFC55F;
    --color-termine : #0798B1;
    --color-archive : #060C49;
    --color-annuler : #FA5266;
    --color-annuler-hover : rgba(250, 82, 102, 0.36);
    --color-retour : #FFAA14;
    --color-retour-hover : rgba(255, 170, 20, 0.45);
    --color-off : #f44336;
    --back-off : #fcebeb;
    --border-champs : 1px solid #ccc;
    --border-top-bleu : 0.5px solid rgba(6, 13, 73, 0.5);
    --police-text : Almarai, sans-serif !important;
    --police-title : Comfortaa, sans-serif !important;
    /* urgence ticket */
    --urgence-treshaute : #FA3A51;
    --urgence-haute : #FD8694;
    --urgence-moyen : #FFAA14;
    --urgence-faible : #0798B1;
    /*etat ticket */
    --etat-attente : #FA3A51 ;
    --etat-encharge : #FD8694 ;
    --etat-traitement : #FFAA14 ;
    --etat--clos : #0798B1 ;
    --etat-reouvert : #060D49;
}

html, body {
    font-family: var(--police-text) !important;
}

h1 {
    font-family: var(--police-title);
    font-style: normal;
    font-weight: 700;
    font-size: 27px;
    line-height: 30px;
    color: var(--color-secondaire);
}

h2 {
    font-family: var(--police-text);
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 25px;
    color: var(--color-secondaire);
}

p {
    margin: 0;
}
tr, td, th {
    border: 2px var(--color-white) solid;
    vertical-align: middle !important;
}

tbody tr {
    background-color: var(--back-darkgrey);
}
tbody tr:nth-child(odd) {
    background-color: var(--back-grey) ;
}

thead tr {
    background-color: var(--color-secondaire)!important;
    color: var(--color-white);
}

.btn:focus {
    box-shadow: none!important;
}

a {
    color: var(--color-secondaire);
    text-decoration: none;
    background-color: transparent;
}

a:hover {
    color: var(--color-principal);
    text-decoration: none;
    background-color: transparent;
}

.float-r {
    float: right;
}

.width-auto {
    width: auto !important;
}
.form-control:disabled, .form-control[readonly] {
    background-color: var(--back-darkgrey);
}


.btn-warning {
    background: var(--color-notif);
    border-radius: 28px;
    border: none;
    font-weight: 700;
    font-size: 15px;
    line-height: 25px;
    text-align: center;
    color: var(--color-white);
    font-size: var(--police-text);
}

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

.btn-warning:focus {
    color: var(--color-white);
    background: var(--color-notif-hover);
    bborder-color: var(--color-notif) 2px solid;
    box-shadow: none;
}

.btn-warning:actif {
    color: var(--color-white);
    background: var(--color-notif-hover);
    border-color: var(--color-notif) 2px solid;
    box-shadow: none;
}

.hidden {
    display: none;
}

tr[onclick] {
    cursor: pointer;
}

.bloc-grey {
    border-radius: 20px;
    background-color: var(--back-grey);
    padding: 20px;
}

.bloc-white {
    border-radius: 20px;
    background-color: var(--color-white);
    padding: 20px;
}

.border-b-bleu {
    border-bottom: var(--border-top-bleu);
    padding: 5px;
}

.etat {
    border-radius: 28px;
    padding: 5px 10px;
    color: white;
    font-weight: 700;
    display: inline-block;
    text-align: center;
}

.attente {
    background-color: var(--etat-attente);
}

.charge {
    background-color: var(--etat-encharge);
}

.traitement {
    background-color: var(--etat-traitement);
}

.clos {
    background-color: var(--etat--clos);
}

.reouvert {
    background-color: var(--etat-reouvert);
}

.faible {
    background-color: var(--urgence-faible);
}

.moyen {
    background-color: var(--urgence-moyen);
}

.haute {
    background-color: var(--urgence-haute);
}

.treshaute {
    background-color: var(--urgence-treshaute);
}
/* PAGE LOGIN */

.login-page {
    background-color: var(--second-bg-color);
}
.login-bloc{
    background-color: var(--main-bg-color);
    box-shadow: var(--box-shadow-bloc);
    border-radius:var(--border-radius-bloc);
}

.logo-ticket {
    padding : 25px;
}

.connexion-bloc {
    border-top: var(--border-top-bleu);
    margin: 3px 20px;
}

.connexion-title {
    font-family: var(--police-title);
    font-style: normal;
    font-weight: 700;
    font-size: 21px;
    line-height: 28px;
    text-align: center;
    color: var(--color-secondaire) ;
    padding: 10px;
}

.form-group {
    margin-top: 13px;
}
.form-control {
    border: var(--border-champs);
    font-size: var(--police-text);
}
.no-border-l {
    border-left: 0;
}

.form-control:focus {
    border: var(--border-champs);
    box-shadow: none;
}
.no-border-l:focus {
    border: var(--border-champs);
    border-left: none;
    box-shadow: none;
}

.input-group-addon {
    border: var(--border-champs);
    border-right: none;
    border-radius: 0.375rem 0 0 0.375rem;
    vertical-align: middle;
    text-align: center;
    width: 38px;
    height: 38px;
}

.input-group-addon svg{
    width: 50%;
    vertical-align: middle;
}

.btn-ci {
    background: var(--color-principal);
    border-radius: 28px;
    border: none;
    font-weight: 700;
    font-size: 15px;
    line-height: 25px;
    text-align: center;
    color: var(--color-white);
    font-size: var(--police-text);
}

.btn-ci:hover {
    background: var(--color-principal-hover);
    color: var(--color-white);
}

.btn-ci:focus {
    color: var(--color-white);
    background: var(--color-principal-hover);
    bborder-color: var(--color-principal) 2px solid;
    box-shadow: none;
}

.btn-ci:actif {
    color: var(--color-white);
    background: var(--color-principal-hover);
    border-color: var(--color-principal) 2px solid;
    box-shadow: none;
}

.btn-ajout::before {
    content: url("../img/icon/plus.svg");
    vertical-align: middle;
    padding: 0 5px 0 0;
}
.btn-archive {
    background: var(--color-secondaire);
    border-radius: 28px;
    border: none;
    font-weight: 700;
    font-size: 15px;
    line-height: 25px;
    text-align: center;
    color: var(--color-white);
    font-size: var(--police-text);
}

.btn-follow {
    background: var(--color-secondaire);
    border-radius: 28px;
    border: none;
    font-weight: 700;
    font-size: 15px;
    line-height: 25px;
    text-align: center;
    color: var(--color-white);
    font-size: var(--police-text);
}

.btn-follow:after {
    content: url("../img/icon/btn-follow.svg");
    vertical-align: middle;
    padding: 0 0 0 5px;
}

.btn-follow:hover {
    background: var(--color-secondaire-hover);
    color: var(--color-white);
}

.btn-archive:before {
    content: url("../img/icon/archive.svg");
    vertical-align: middle;
    padding: 0 5px 0 0;
}

.btn-archive:hover {
    background: var(--color-secondaire-hover);
    color: var(--color-white);
}

.btn-envoyer:before {
    content: url("../img/icon/send.svg");
    vertical-align: middle;
    padding: 0 5px 0 0;
}

.btn-annuler {
    background: var(--color-annuler);
    border-radius: 28px;
    border: none;
    font-weight: 700;
    font-size: 15px;
    line-height: 25px;
    text-align: center;
    color: var(--color-white);
    font-size: var(--police-text);
}
.btn-annuler:before {
    content: url("../img/icon/icon-annuler.svg");
    vertical-align: middle;
    padding: 0 5px 0 0;
}

.btn-annuler:hover {
    background: var(--color-annuler-hover);
    color: var(--color-white);
}




.btn-unfollow {
    background: var(--color-annuler);
    border-radius: 28px;
    border: none;
    font-weight: 700;
    font-size: 15px;
    line-height: 25px;
    text-align: center;
    color: var(--color-white);
    font-size: var(--police-text);
}
.btn-unfollow:before {
    content: url("../img/icon/icon-unfollow.svg");
    vertical-align: middle;
    padding: 0 5px 0 0;
}

.btn-unfollow:hover {
    background: var(--color-annuler-hover);
    color: var(--color-white);
}

.btn-valider:before {
    content: url("../img/icon/icon-valider.svg");
    vertical-align: middle;
    padding: 0 5px 0 0;
}

.btn-retour {
    background: var(--color-retour);
    border-radius: 28px;
    border: none;
    font-weight: 700;
    font-size: 15px;
    line-height: 25px;
    text-align: center;
    color: var(--color-white);
    font-size: var(--police-text);
}
.btn-retour:before {
    content: url("../img/icon/icon-retour.svg");
    vertical-align: middle;
    padding: 0 5px 0 0;
}
.btn-retour:hover {
    background: var(--color-retour-hover);
    color: var(--color-white);
}

.btn-export:before {
    content: url("../img/icon/icon-excel.svg");
    vertical-align: middle;
    padding: 0 5px 0 0;
}

.btn-print {
    background: var(--color-secondaire);
    border-radius: 28px;
    border: none;
    font-weight: 700;
    font-size: 15px;
    line-height: 25px;
    text-align: center;
    color: var(--color-white);
    font-size: var(--police-text);
}

.btn-print:hover {
    background: var(--color-secondaire-hover);
    color: var(--color-white);
}

.btn-print:before {
    content: url("../img/icon/icon-print.svg");
    vertical-align: middle;
    padding: 0 5px 0 0;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    background: var(--color-principal);
    color: var(--color-white);
    border: none;
}
/* HEADER */

.navbar {
    background-color: var(--back-grey);
    vertical-align: middle;
}

.messages-menu {
    display: inline-block;
}

.nbr-message{
    color: var(--color-white);
    background-color: var(--color-notif) ;
    border-radius: 20px;
    padding: 2px 4px;
}
.user-menu button b {
    color: var(--color-secondaire);
}
.user-menu button:hover b{
    color: var(--color-principal);
}

.dropdown-toggle::after {
    content: url("../img/icon/icon-arrow-bleufonce.svg");
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: middle;
    border: 0 !important;
}

.user-menu .dropdown-toggle:hover::after {
    content: url("../img/icon/icon-arrow-turquoise.svg");
}

.dropdown-menu {
    right: 11px;
    left: initial;
    float: left;
    min-width: 12rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
    border-radius: 10px;
    box-shadow: var(--box-shadow-bloc);
}

.dropdown-menu li {
    list-style: none;
}

.dropdown-items {
    padding: 15px;
}
.dropdown-items li {
    margin: 3px;
}

.dropdown-items li a {
    color: var(--color-secondaire);
    text-decoration: none;
}

.dropdown-items li a:hover {
    color: var(--color-principal);
    text-decoration: none;
}

.dropdown-items li a svg path {
    fill: var(--color-secondaire);
}

.dropdown-items li a:hover svg path {
    fill: var(--color-principal);
}

/* Menu */

.nom-soc {
    color: white;
    border-bottom: 1px solid var(--color-principal);
}
.menu-hamb {
    border: none;
    background: transparent;
}
#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    overflow: hidden;
}

#wrapper.toggled {
    padding-left: 250px;
    overflow: scroll;
}

#sidebar-wrapper {
    z-index: 1000;
    position: absolute;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: var(--color-secondaire);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    text-align: center;
    position: absolute;
    padding: 15px;
    width: 100%;
    overflow-x: hidden;
}
.xyz{
    min-width: 360px;
}
#wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: 0px;
}
.fixed-brand{
    width: auto;
}
/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-top: 2px;
}

.sidebar-nav li {
    text-indent: 15px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: var(--color-darkgrey);
}

.sidebar-nav li a svg {
    width: 21px;
    vertical-align: sub;
}

.sidebar-nav li a svg path {
    fill:var(--color-darkgrey);
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: var(--color-white);
    background: rgba(255,255,255,0.2);
    border-left: var(--color-principal) 2px solid;
}
.sidebar-nav li a:hover svg path {
    fill:var(--color-white);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: var(--color-white);
    background: none;
}
.no-margin{
    margin:0;
}

@media(min-width:768px) {
    .menu-hamb {
        display: none;
    }
    #wrapper {
        padding-left: 250px;
    }
    .fixed-brand{
        width: 250px;
    }
    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 250px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 250px;
    }
    #wrapper.toggled-2 #sidebar-wrapper {
        width: 50px;
    }
    #wrapper.toggled-2 #sidebar-wrapper:hover {
        width: 250px;
    }


    #page-content-wrapper {
        text-align: left;
        padding: 20px;
        position: relative;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
        padding-left: 250px;
    }
    #wrapper.toggled-2 #page-content-wrapper {
        position: relative;
        margin-right: 0;
        margin-left: -200px;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
        width: auto;

    }
}

/* Page */

.pren-nom {
    color: var(--color-principal);
}
.ajout-soc {
    width: 100%;
}
.ajout-soc input {
    display:inline-block;
    width: auto;
    vertical-align: middle;
}


.toggle-button-cover {
    display: table-cell;
    position: relative;
    width: 200px;
    height: 140px;
    box-sizing: border-box;
}

.button-cover {
    height: 100px;
    margin: 20px;
    background-color: #fff;
    box-shadow: 0 10px 20px -8px #c5d6d6;
    border-radius: 4px;
}

.button-cover:before {
    counter-increment: button-counter;
    content: counter(button-counter);
    position: absolute;
    right: 0;
    bottom: 0;
    color: #d7e3e3;
    font-size: 12px;
    line-height: 1;
    padding: 5px;
}

.button-cover,
.knobs,
.layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.button {
    position: relative;
    top: 50%;
    width: 57px;
    height: 28px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

.button.r,
.button.r .layer {
    border-radius: 100px;
}

.button.b2 {
    border-radius: 2px;
}

.checkbox {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}

.knobs {
    z-index: 2;
}

.layer {
    width: 100%;
    background-color: var(--second-bg-color);
    transition: 0.3s ease all;
    z-index: 1;
}

/* Button 3 */
.button-3 .knobs:before {
    content: "ON";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 10px;
    color: var(--color-white);
    font-size: 9px;
    font-weight: bold;
    text-align: center;
    line-height: 0;
    padding: 10px 3px;
    background-color: var(--color-principal);
    border-radius: 50%;
    transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);
}

.button-3 .checkbox:active + .knobs:before {
    width: 46px;
    border-radius: 100px;
}

.button-3 .checkbox:checked:active + .knobs:before {
    margin-left: -26px;
}

.button-3 .checkbox:checked + .knobs:before {
    content: "OFF";
    left: 32px;
    background-color: var(--color-off);
}

.button-3 .checkbox:checked ~ .layer {
    background-color:var(--back-off);
}

.action {
    width: 10%;
    text-align: center;
}

/* fil ariane */

.breadcrumb {
    background-color: transparent!important;
    font-size: 13px;
    font-style: italic;
}

/* messagerie */


.lu {
    width: 5%;
    text-align: center;
}

.lu-ligne form {
    margin: auto;
    text-align: center;
}

.btn-lu {
    background-color: var(--color-principal);
    border-radius: 20px;
    border: none;
    color: var(--color-white);
    font-weight: bold;
    width: 20px;
    height: 20px;
    padding: 4px;
    cursor: pointer;
}

#datatableMess td {
    cursor: pointer;
}

/* accueil agent */

.panel-tabs div {
    display: inline-block;
}

.button-tabs {
    color: var(--color-principal);
    font-weight: bold;
    border: 2px solid var(--color-principal);
    border-radius: 35px;
    padding: 5px 10px;
    cursor: pointer;
}

.button-tabs svg  {
    vertical-align: bottom;
}
.button-tabs.active {
    background-color: var(--color-principal);
}

.button-tabs.active {
    color: var(--color-white);
}

.active svg path {
    fill: var(--color-white);
}

.bloc-attente {
    background-color: var(--color-attente);
    border-radius: 20px;
}

.bloc-archive {
    background-color: var(--color-archive);
    border-radius: 20px;
}

.bloc-encours {
    background-color: var(--color-encours);
    border-radius: 20px;
}

.bloc-termine {
    background-color: var(--color-termine);
    border-radius: 20px;
}

.ticket-recap p{
    color: var(--color-white);
    font-size: 16px;
}

.nbr-ticket {
    font-size: 24px!important;
    font-weight: bold;
}

.ticket-recap img {
    width: 60px;
}

.tab-pane {
    display: none;
}


.tab-pane.active {
    display: flex;
}

/* ticket */

.tab-ticket {
    width: 100%;
}

.tab-ticket tr{
    background-color: transparent !important;
    border: 0px solid transparent;
    border-bottom: var(--border-top-bleu);
    padding: 5px;
}

.tab-ticket tbody tr td, .tab-ticket tbody tr th {
    border: 0px solid transparent;
    padding: 10px;
}

.tab-ticket tbody tr th {
    color: var(--color-darkgreyPlus);
    font-size: 17px;
}

.tab-ticket tr:nth-last-child(1) {
    border-bottom: none;
}

.icon-lien:hover svg path{
    fill: var(--color-principal);
}

.filte-ticket p {
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    color: var(--color-secondaire);
    margin: 10px 0;
}

.filte-ticket select {
    width: 100%;
    height: 30px;
}
.filte-ticket input {
    width: 100%;
    height: 30px;
}

.btn-filtre {
    background-color: transparent;
    border: none;
    text-decoration: underline;
    color: var(--color-secondaire);
}

.btn-filtre:hover {
    color : var(--color-principal)
}


.filte-ticket input.btn-annuler {
    width: auto;
    display: inline-block;
    padding: 0 10px;
}

.filte-ticket input.btn-filtre {
    width: auto;
    display: inline-block;
}


.ajout-ticket label {
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;
    color: var(--color-secondaire);
}

.more-ticket {
    background-color: var(--second-bg-color);
    padding: 30px;
    border: 20px;
}

.created-by {
    color: var(--color-darkgreyPlus);
    font-weight: 400;
    font-size: 17px;
    line-height: 22px;
}

.titre-infoticket {
    font-weight: 700;
    font-size: 17px;
    line-height: 22px;
    color: var(--color-secondaire);
}

@media(max-width:768px) {
    .filtre-action {
        margin-top: 20px;
    }
}

/* PJ */
.space{
    margin: 10px;
}
.icon-download:before {
    background-image: url(../img/icon/icon-download.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 35px;
    height: 35px;
    content: "";
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-color: var(--back-grey);
    padding: 0;
    margin: 0;
    border-radius: 50px;
}

.custom-file:hover .icon-download:before {
    background-color: var(--color-darkgrey);
}
.icon-cross:before {
    background-image: url(../img/icon/icon-cross.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 35px;
    height: 35px;
    content: "";
    display: inline-block;
    vertical-align: middle;
    position: relative:
    padding: 0;
    margin: 0;
    border-radius: 50px;
}
.btn-pj {
    height: 35px;
    width: 200px;
    background-color:#EFEFEF;
    padding: 0;
    margin: 0;
    border:0;
    border-radius: 50px;
    cursor: pointer;
}

.text-no-pj {
    font-family: 'Apercu';
    font-style: italic;
    font-weight: 400;
    font-size: 12px;
    line-height: 12px;
    text-align: center;
    color: #919191;
    padding: 5px;
}
.text-pj {
    font-family: 'Apercu';
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    line-height: 11px;
    text-align: left;
    color: #333333;
    padding: 5px;
}

.overflow-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    width: 110px;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
}

.custom-file input[type="file"]{
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.envoi-com div {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.com-aera {
    width: 60%;
}

.com-aera textarea {
    height: 40px!important;
}

.nom-user {
    color: var(--color-secondaire);
    font-weight: 700;
}

.date-com {
    color: var(--color-secondaire);
}

/* ajout site */

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

.t-0 {
    top:0!important;;
}