/* ========== VARIABLES GLOBALES ========== */
    
     :root {
        --first-color-dark: rgb(4, 66, 95);
        --first-color: #0877AC;
        --first-color-light: #49a3cf;
        /*--first-color-ultralight: #e6ebfd;*/
        --first-color-ultralight: #f1f5f7;
        --second-color-dark: #5e0142;
        --second-color: #ad007a;
        --second-color-light: #ee04a8;
        --second-color-ultralight: #ac7d9e;
        
        --white-color: #fff;
        --grey-color-ultralight: #fafafa;
        /* #fafafa;*/
        --grey-color-light: #ddd;
        /*#f6f6f6*/
        --grey-color: #aaa;
        --grey-color-dark: #333;
        --black-color: #000;
        /*--font-family-title: 'Montserrat', sans-serif;*/
        --font-family-title: 'Bentham', serif;
        --font-family: 'Lato', sans-serif;
        /*--font-family: 'Roboto', sans-serif;
        --font-family:  'Trocchi', serif;*/
        --navbar-height: 60px;
        --title-height: 40px;
        --sidebar-width: 100px;
    }
    /* ========== ELEMENTS HTML GLOBAUX ========== */
    
    * {
        box-sizing: border-box;
    }
    
    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    
    body {
        background-color: #ffffff;
        font-family: var(--font-family);
        font-size: 0.85rem;
        color: var(--black-color);
    }
    
     ::placeholder {
        color: var(--grey-color) !important;
        opacity: 0.7;
        font-size: 0.6rem;
    }
    
    a,
    a:hover,
    a:visited,
    a:link,
    a:active {
        text-decoration: none !important;
    }
    
    i {
        margin-right: 5px;
        margin-left: 5px;
    }
   
    .w-50 {
        width: 50px !important;
    }

    .w-80 {
        width: 80px !important;
    }
    
    .w-120 {
        width: 120px !important;
    }
    
    .w-150 {
        width: 150px !important;
    }
    
    .w-200 {
        width: 200px !important;
    }

    .w-250 {
        width: 250px !important;
    }

    .w-350 {
        width: 350px !important;
    }

    .content-center {
        margin: 0 auto !important;
    }
    
    /*
.btn {
    font-size: 0.8rem;
    height: 30px;
}
*/
    .container{

        max-width:1600px !important;
        margin-top: 5px;
        padding-left: 30px;
        height:95vh !important;
    }

    .navbar-section-center{
        font-family:var(--font-family-title);
        font-size:1.5rem;
        color: var(--second-color-dark);
        padding: 10px;

    }

    .navbar-letter{
        border-bottom: solid 1px var(--grey-color-light);
        padding: 10px 10px 0px 10px;

    }

    .navbar-letter p {
        font-family:var(--font-family-title);
        font-size:1rem;
        font-weight:600;
        color: var(--second-color-dark);
        margin-bottom:0;
    }

    .btn-primary {
        background-color: var(--second-color) !important;
        color: var(--white-color) !important;
    }
    
    .btn-primary:hover {
        background-color: var(--second-color-dark) !important;
        
    }
    
    .btn-link {
        font-size: 0.85rem !important;
        padding: 5px 10px 10px 10px;
        margin-right: 10px;
        color: var(--second-color-dark) !important;
        /*border-radius: 20px !important;
        border-right: solid 1px var(--second-color-dark) !important;
        border-left: solid 1px var(--second-color-dark) !important;*/

    }
    
    .btn-link-grid {
        font-size: 0.7rem !important;
        padding: 5px 5px 5px 5px !important;
        margin-top: -5px !important;
        background-color: transparent !important;
        color: var(--second-color-dark) !important;
        /*height: 20px !important;*/
        border: none;
        widows: 100%;
    }
    
    .btn-link:hover {
        background-color: var(--second-color) !important;
        color: var(--white-color) !important;
    }
    
    .btn-link-grid:hover {
        font-size: 1rem !important;
        color: var(--second-color) !important;
    }
    
    .btn-circle {
        border-radius: 50% !important;
    }
    
    .tooltip::after {
        font-family: var(--font-family) !important;
        font-size: 0.6rem !important;
        background-color: var(--white-color);
        color: var(--grey-color-dark);
        border-radius: .2rem;
        border: solid 1px #aaa !important;
    }
    
    .form-checkbox input:focus+.form-icon,
    .form-radio input:focus+.form-icon,
    .form-switch input:focus+.form-icon {
        border-color: var(--first-color-dark) !important;
        box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
    }

    .form-checkbox input:checked+.form-icon,
    .form-radio input:checked+.form-icon,
    .form-switch input:checked+.form-icon {
        background: var(--first-color-dark) !important;
        border-color: var(--first-color-dark) !important;
    }

  /*
    .panel-form {
        -webkit-box-shadow: 1px 1px 1px 1px var(--first-color-dark);
        box-shadow: 1px 1px 1px 1px var(--first-color-dark);
        padding:0 !important;
        margin:0px !important;
        background-color: var(--white-color) !important; 
        border:solid 2px var(--grey-color-dark) !important;
        min-height:650px;
   
    }

    .panel-form .panel-header {
        margin:0px !important;
        padding:10px !important;
        background-color: var(--first-color) !important;
    }
*/

    .panel-form .panel-header.panel-header-choice {
        background-color: var(--grey-color-ultralight) !important;
        margin-top:20px !important;
    }

   
    .panel-form .panel-header.panel-header-choice .form-group-choice .form-select,
    .panel-form .panel-header.panel-header-choice .form-group-choice .form-label
    {
       font-size:1rem;
       height:40px;
    }

    .panel-form {
        padding:10px;
    }

    .panel-form .column-img {
        padding:20px 10px 20px 10px;
    }

    .panel-form img {
        margin:0 auto;
    }

    .panel-form .panel-body {
        margin-top: 0;
    }

  

    .panel-form .panel-body h1{
        Font-size:1.2rem;
    }
    
    .panel-form .panel-body h5{
        padding: 10px;
        font-size:0.9rem;
        border-bottom: solid 1px var(--grey-color-light);
    }

    .panel-form .panel-footer {
        
        padding:10px;
        background-color: var(--white-color) !important;
    }

    .panel-form .panel {
        
        border:none;
        
    }
    .panel {
        background-color: var(--white-color) !important;
        padding-bottom:10px;
        border:none !important;
    }
    
    .panel-header {
        background-color: transparent !important;
        /*height: 40px;*/
        margin:0px 10px 20px 10px!important;
        padding-top:10px !important;
        
      
    }
    
    .panel-title {
        font: var(--font-family-title) !important;
        font-size:0.9rem !important;
        color: var(--second-color-dark) !important;
        margin:0px 10px 10px 10px!important;
    }

    .panel-body {
        margin-top: 20px;
        /*background-color:var(--grey-color-ultralight);
        
        padding: 0px !important;
        margin-top: 10px;
        margin-bottom: 5px;
        height: 100%;
        padding: 10px !important;
        
    */
        
    }
    
    .panel-detail {
        margin: 0 15px 0 15px !important;
    }
    
    .panel-detail .panel-header {
        background-color: var( --grey-color-ultralight) !important;
    }
    
    .panel-detail .panel-header .detail-title {
        font-size: 0.9rem;
        color: var( --first-color-dark) !important;
        padding: 5px 10px 5px 20px;
    }
    /*
.panel-detail .panel-body {
    padding: 10px !important;
}

.panel-detail .panel-footer {
    padding: 5px !important;
    background-color: var( --white-color);
}
*/

    .panel-form-saisie {
        border:none;
        margin-top:20px;
    }

    .panel-form-saisie figure{
        width:100px;
        height:100px;
        font-size:2.2rem;
    }
   
    .panel-form-saisie .card{
        padding:0px 10px 0px 10px !important;
        cursor: pointer;
    }

    .panel-form-saisie .card:hover,
    .panel-form-saisie .card.active
    {
        border:solid 1px var(--second-color-dark);
        /*box-shadow: 2px 1px 1px var(--grey-color);*/
      
    }

    .panel-form-saisie .card-formule-6 .card-body figure{
        color: white;
        background-color:var(--first-color); 
    }

    .panel-form-saisie .card-formule-12 .card-body figure{
        color: white;
        background-color:var(--first-color-dark); 
    }

    .panel-form-saisie .formule{
        font-size:1.2rem;
    }

    .panel-form-login {
        border:solid 1px var(--grey-color-light) !important;
         margin-top:100px !important;
        margin:0 auto;
        max-width: 500px;
        padding: 10px;
        box-shadow: 2px 1px 1px var(--grey-color);
    }

    .panel-form-login .panel-header {
        color: var(--first-color-dark);
        border-bottom:solid 1px var(--grey-color-light) !important;
    }
    
    .panel-form-login .panel-body {
        padding: 0px 10px 20px 10px;
    }

    .panel-form-login .panel-footer {
        color: var(--first-color-dark);
        border-top:solid 1px var(--grey-color-light) !important;
        padding:5px !important;
    }


    .tab,
    .tab-item,
    .tab-item a {
        /*color:var(--grey-color-light) !important;*/
        color:var(--second-color-ultralight) !important;
        font-size: 0.8rem;
        border:none !important;
    }
    
    .tab {
        border-bottom: solid 1px var(--first-color-dark) !important;
    }

    .tab-item {
        padding: 10px !important;
        
    }

    .tab-item .avatar {
        background-color:var(--second-color-ultralight) !important;
        font-size: 0.8rem;
    }

    .tab-item.active a,
    .tab-item.active p  {
        /*border:none !important;
        border-bottom:solid 1px var(--first-color-dark) !important;
        color:var(--white-color) !important;*/
        color:var(--second-color) !important;
        font-size:0.9rem;
        font-weight: 600;
    }
    
    .tab-item.active .avatar {
        background-color:var(--second-color) !important;
        font-size:0.9rem;
        font-weight: 600;
    }
    
/*
    .tab-item.active {
        border-bottom: solid 2px var(--second-color) !important;
    }
*/

    .tab li:hover,
    .tab li:active,
    .tab .tab-item:hover,
    .tab .tab-item:active,
    .tab .tab-item a:hover,
    .tab .tab-item a:active {
        border:none !important;
    }

    .footer {
        position:fixed;
        font-size: 0.6rem;
        color: var(--grey-color-dark);
        display: block;
        bottom: 0;
        left: 0;
        height: 30px;
        padding: 5px 10px 10px 10px;
        width: 100%;
        text-align: center;
        
    }
    
    .message-toast {
        position:fixed;
        font-size: 0.8rem;
        display: block;
        bottom: 0;
        left: 0;
        height: 50px;
        width:100%;
        text-align: center;
              
    }
   
    /*
input:required {
    border: none !important;
    box-shadow: none !important;
    background-color: var(--second-color-light);
}
*/

    .form-label {
        color: #808080;
        text-align: right;
        font-size: 0.7rem;
        margin-right:10px;
    }

    .form-input,
    .form-select,
    .form-textarea {
        font-size: 0.7rem;
        color: var(--grey-color-dark);
        background-color: var(--first-color-ultralight) !important;
        border-radius: 0;
        outline: none;
        border: 1px solid var(--grey-color-light);
        /*width: 100%;*/
        
    }

    .form-select,
    .form-select option,
    .form-select optgroup  {
        background-color:var(--first-color-ultralight) !important;
    }
/*
    .form-group {
        align-content: flex-end;
        margin-top: 3px !important;
        margin-bottom: 2px !important;
    }
    
    .form-label {
        font-family: var(--font-family) !important;
        font-size: 0.7rem !important;
        float: right;
        color: var(--first-color) !important;
        margin-right: 10px;
    }

    .form-input,
    .form-select,
    .form-textarea {
        font-family: var(--font-family) !important;
        font-size: 0.8rem !important;
        width: 100%;
        color: var(--black-color) !important;
        background-color:var(--white-color);
        border: solid 1px var(--grey-color-light) !important;
    }
    
    .form-input:active,
    .form-select:active,
    .form-textarea:active,
    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus,
    .form-input:hover,
    .form-select:hover,
    .form-textarea:hover {
        border: none !important;
        border-bottom: solid 1px var(--first-color) !important;
        box-shadow: none;
    }
    
    .form-input:active,
    .form-select:active,
    .form-textarea:active,
    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
        background-color: var(--first-color-ultralight) !important;
    }

  

    .form-select option {
        background-color: var(--white-color) !important;
        color: var(--black-color) !important;
        ;
    }
    
    .form-select option:hover,
    .form-select option:focus,
    .form-select option:active{
        background-color: var(--first-color) !important;
        color: var(--white-color) !important;
        ;
    }
    
    .form-select-label {
        font-family: var(--font-family) !important;
        font-size: 0.8rem !important;
        text-align: right;
        color: var(--first-color) !important;
        margin-right: 10px;
        border: none !important;
        background-color: transparent !important;
    }
    
    .form-select-label:hover,
    .form-select-label:active,
    .form-select-label:focus {
        border: none !important;
    }
    
    
    
*/

.form-input-readonly {
    /*font-size: 0.8rem;*/
    color: var(--grey-color-dark) !important;
    margin-top: 0;
    margin-bottom: 0;
    background-color: transparent !important;
    border:none;
}

    .invalid-input {
        border: solid 1px var(--second-color-light) !important;
    }
    
    .invalid-input:active,
    .invalid-input:active,
    .invalid-input:active,
    .invalid-input:focus,
    .invalid-input:focus,
    .invalid-input:focus,
    .invalid-input:hover,
    .invalid-input:hover,
    .invalid-input :hover {
        border: solid 1px var(--first-color-light) !important;
    }
    
    .header-search {
        padding: 5px 10px 5px 10px;
    }
    
    .header-search .form-input {
        background-color: transparent !important;
    }
    
    .header-search .form-input::placeholder,
    .header-search i {
        color: var(--grey-color) !important;
    }
    
    .input-group-addon {
        background-color: transparent !important;
        border: none !important;
        margin-top: 4px;
    }
    
    .span-required {
        font-size: 0.7rem;
        color: var(--second-color);
        margin-right: 5px;
    }
    
    .bc-menu .list-group-item {
        font-size: 0.7rem;
        background-color: var(--first-color-ultralight) !important;
        color: var(--black-color);
        z-index:1000;
    }
    
    .bc-menu .list-group-item:hover {
        background-color: var(--second-color) !important;
        color: var(--white-color);
    }
    
    @media screen and (max-height: 450px) {
        .sidebar {
            padding-top: 15px;
        }
        .sidebar a {
            font-size: 18px;
        }
    }
    /* ------------------- STYLE BOOTCOMPLETE --------------------*/
    
    .list-group-item {
        position: relative;
        display: block;
        padding: 0.75rem 1.25rem;
        margin-bottom: -1px;
    }
    
    .list-group-item:first-child {
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
    }
    
    .list-group-item:last-child {
        margin-bottom: 0;
        border-bottom-right-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
    }
    
    .list-group-item:hover,
    .list-group-item:focus {
        z-index: 1;
        text-decoration: none;
    }
    
    .list-group-item.disabled,
    .list-group-item:disabled {
        color: #6c757d;
        background-color: #fff;
    }
    
    .list-group-item.active {
        z-index: 2;
        color: #fff;
        background-color: #007bff;
        border-color: #007bff;
    }
    /* -------------------- CSS TABULATOR -------------------- */


    .tabulator {
        font-family: var(--font-family) !important;
        font-size: 0.8rem !important;
        font-weight: 300 !important;
        border: none !important;
        margin: 5px !important;
        color: var(--grey-color-dark) !important;
        
    }
    
    .tabulator .tabulator-header {
        border-bottom: solid 1px  var(--first-color-dark) !important;
        
    }
    
    .tabulator .tabulator-header .tabulator-col {
        text-align: justify;
        vertical-align: middle !important;
        height: 50px !important;
        cursor: auto !important;
        color: var(--first-color-dark) !important;
        border-bottom: solid 1px  var(--first-color-dark) !important;
    }
    
    .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
        background-color: transparent;
        color: var(--first-color) !important;
        border-bottom: solid 1px  var(--first-color-dark) !important;
        cursor: pointer;
    }
    
    .tabulator-row {
        background-color: transparent !important;
        border: none !important;
        vertical-align: middle;
        border-bottom: solid 1px var(--grey-color-light) !important;
        height: 40px !important;
    }
    
    .tabulator .tabulator-cell {
        border: none !important;
        cursor: auto !important;
    }
    
    .tabulator-row:nth-child(even) {
        background-color: transparent !important;
    }
    
    .tabulator-row.tabulator-selected {
        background-color: transparent !important;
    }
    
    .tabulator-row.tabulator-selected:hover {
        background-color: transparent !important;
    }
    
    .tabulator-row.tabulator-selectable:hover {
        cursor: pointer;
        background-color: transparent !important;
        color: var(--first-color-dark) !important;
    }
    
    .tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs {
        font-size: 0.9rem;
        font-weight: bold;
        color: #000;
        background: #fff !important;
        border: 1px solid #f6f6f6 !important;
    }
    
    .tabulator-row.tabulator-group {
        border: 1px solid #f6f6f6 !important;
        background: #7a8fac !important;
        color: #fff;
        font-size: 1rem;
        font-variant: small-caps;
    }
    
    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow {
        display: none;
    }
    
    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow {
        border-bottom: 6px solid var(--white-color);
    }
    
    .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow {
        border-top: 6px solid var(--white-color);
    }

    /* ------------------ MODAL ----------------*/
   
    
    .modal-container {
        border-radius: 5px !important;
        background-color: var(--grey-color-ultralight) !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: 2px 1px 1px var(--grey-color);
    }

    .modal-body {
        background-color: var(--white-color) !important;
        margin:10px;    
    }

  /*    
    .modal:target .modal-overlay,
    .modal.active .modal-overlay {
        background: rgba(25, 25, 35, .40) !important;
    }
    
.modal:target,
.modal.active {
    z-index: 410 !important;
}
.modal:target .modal-container,
.modal.active .modal-container {
    z-index: 400;
}

*/
    
    .modal-container .modal-header {
        background-color: var(--first-color) !important;
        color: var(--white-color) !important;
        margin: 0 !important;
        padding: 10px 10px 10px 10px !important;
    
    }
    
    .modal-container .modal-body {
        background-color: var(--white-color) !important;
        color: var(--grey-color-dark) !important;
        
    }
    
    .modal-container .modal-body p {
        font-size: 0.9rem !important;
    }
   
    .modal-container .modal-body .icon-green {
        color: #68aa78;
        margin-top: 5px;
        margin-bottom: 10px;
    }
    
    .modal-container .modal-body .icon-red {
        color: #be3f3f;
        margin-top: 5px;
        margin-bottom: 10px;
    }
    
    .modal-container .modal-body .icon-blue {
        color: #425faf;
        margin-top: 5px;
        margin-bottom: 10px;
    }
    
    .modal-container .modal-body .content-error p {
        font-size: 0.55rem !important;
        margin-bottom: 0;
    }
   
    .modal-full {
        min-height:768px !important;
        min-width:1024px !important;
    }
   
    /* FILE INPUT */
    
    .upload-content {
        overflow: hidden;
        position: relative;
    }
    
    .upload-content [type=file] {
        cursor: inherit;
        display: block;
        font-size: 999px;
        filter: alpha(opacity=0);
        min-height: 100%;
        min-width: 100%;
        opacity: 0;
        position: absolute;
        right: 0;
        text-align: right;
        top: 0;
    }
    /* Example stylistic flourishes 
    
    .fileContainer {
        background: red;
        border-radius: .5em;
        float: left;
        padding: .5em;
    }
    */
    
    .upload-content [type=file] {
        cursor: pointer;
    }

    .panel-content {    
        background-color: var(--grey-color-light);
        padding:10px;
        
    }

    .letter {
        background-color: var(--white-color);
        color:var(--black-color);
        padding:30px;
        max-width:827px;
        max-height:1170px;
        margin: 0 auto;
        
    }

    .letter field {
        background-color: yellow !important;
        font-weight:400;
    }

    .letter-recipient {
        margin-top:0 !important;
        padding-top:0 !important;
        padding-left:432px;
        /*top:198px;*/
    }

    
    .letter-sender p {
        margin-bottom:0 !important;
    }

    .letter-recipient p {
        margin-top:0 !important;
    }

    .letter-sender ,
    .letter-content ,
    .letter-recipient {
        font-size:0.8rem !important;
    }

    fieldset {    
        border: solid 1px var(--grey-color-light);
        padding:5px;
        margin:2px !important;
    }

    legend {
        font-family: var(--font-family-title);
        font-size:0.9rem;
        color : var(--first-color-dark);
        margin-bottom:0;
    }

/*
    fieldset .form-group {
        padding:0px 2px 0px 2px !important;
        margin:0px 2px 0px 2px !important;
    }

    fieldset .form-input {
        font-size:0.6rem !important;
        padding:2px; 
        margin-bottom:0px !important;
        margin-top:0px !important;
    }

    fieldset .form-label {
        font-size:0.6rem !important;
        margin-bottom:0px !important;
        margin-top:0px !important;
    }

    .letter-input:hover,
    .letter-input:focus {

        border:none;
        box-shadow: none !important;
    }

 
    .letter input[type="checkbox"] + label{
        color: var(--grey-color-light) !important;
    }

    .letter input[type="checkbox"]:checked + label{
        color: var(--black-color) !important;
    }
 
    .letter-input::placeholder {
        
        color:var(--grey-color) !important;
        font-size:0.9rem;
        opacity:1;
        
    }
*/

    .letter input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:var(--first-color) !important;
    }
    
    .letter input::-ms-input-placeholder { /* Microsoft Edge */
    color:var(--first-color) !important;
    }


/* MEDIA QUERIES */

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

    /*
    .form-label {
        text-align: left !important;
        margin-right:auto !important;
    }
*/

}